<template>
    <div class="sercher">
        <header>
            <span><span class="glyphicon glyphicon-menu-left" @click="goBack"></span></span>
            <div class="ipt">
                <input type="text" class="ser">
                 <div class="ipt_text">
                    <span class="glyphicon glyphicon-search">搜索商家、商品名称</span>
                </div> 
            </div>
            <span class="span_text">搜索</span>
        </header> 

    <div class="hot_title"><span style="margin-left: 0.5rem">热门搜索</span></div>
    <div class="List">
        <ul>
            <li v-for="(value,index) in list" :key="index">
                {{value.search_word}}
            </li>            
        </ul>
      
    </div>

    </div>   
</template>
<script>
    export default {
        data(){
            return {
                list:[]

            }
        },
        created(){
            this.$http.get("/mainsite/shopping/v3/hot_search_words?latitude=24.54786&longitude=118.124509")
            .then(function(resData){
                console.log(resData.body)
                this.list=resData.body;

            })

        },
        methods:{
            goBack(){
                 this.$router.go(-1);
            }

        }
        
    }
    
</script>

<style scoped>
header{
    width: 100%;
    height: 1.875rem /* 30/16 */;
    background-color: rgb(30, 164, 253);
    text-align: center;
    line-height: 1.875rem /* 30/16 */;
    color: white;
    font-size: .75rem /* 12/16 */;
    font-weight: 600;
    z-index: 100;
   display: flex;
   justify-content: space-between;
}
   header .ipt{
       width: 70%;
       /* height: 1.875rem; */
       /* border: .0625rem 1/16 solid red; */
       position: relative;
       /* margin: 0px auto; */

   }
   header .ser{
       width: 100%;
       height: 1.25rem;
   }
 
     header  .ipt_text{
        width: 100%;
        position: absolute;
        color: gray;
        font-size: .625rem ;
        top:calc(50% - .8rem);
    }


 
    .hot_title{
        width: 100%;
        background-color: white;
        height: 1.875rem /* 30/16 */;
        line-height: 1.875rem /* 30/16 */;
        font-size: .75rem /* 12/16 */;
        font-weight: 600;
    }
    .List{
        width: 100%;
        height: 25rem /* 400/16 */;
        background-color: white;

    }
    .List li{
        display: inline-block;
        padding:.1875rem /* 3/16 */ .3125rem /* 5/16 */;
        background-color: rgb(240, 239, 239);
        margin:  .3125rem /* 5/16 */ ;
    }
   
</style>